<template>
    <ul class="list">
        <li v-for="(item, index) in list" :key="index" @click="goDetail(item.productId)">
            <img :src="item.frontPicUrl" class="cover"/>
            <div class="name van-multi-ellipsis--l2">
                <span class="tag">{{item.productTagId == 1 ? '热卖' : '推荐'}}</span>
                {{item.productName}}
            </div>
            <div class="info">
                <span v-if="item.productType == 1">¥{{item.price}}</span>
                <span v-else>{{item.price}}积分</span>
                <van-icon name="shopping-cart" class="icon"/>
            </div>
        </li>   
    </ul>
</template>
<script>
export default {
    data () {
        return {
            list: [],
            total: 0,
            pageNum: 1,
            pageSize: 100
        };
    },
    onReachBottom(){
        this.getList(this.pageNum + 1);
    },
    methods: {
        getList(pageNum) {
            const params = this.$getQuery();
            this.$api.getProductInfoList({
                classId: params.classId,
                schoolId: this.$getStorage('schoolInfo').schoolId,
                pageNum,
                pageSize: this.pageSize
            }).then(res => {
                if (res.code == 0) {
                    if (pageNum>1) {
                        this.list = [...this.list, ...res.data.productList];
                    } else {
                        this.list = res.data.productList;
                    }
                    this.pageNum = pageNum;
                } 
            });
        },
        goDetail(id) {
            wx.navigateTo({
                url: `/pages/shop/detail/main?id=${id}`
            });
        }
    },
    onShow() {
        this.getList(1);
    }
}
</script>
<style lang="scss" scoped>
.list {
    padding: 15px;
    min-height: calc(100% - 30px);
    background: $grey-bg;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
        width: p2r(335px);
        height: p2r(517px);
        border-radius: 4px;
        background: #fff;
        overflow: hidden;
        margin-bottom: 10px;
        img {
            width: p2r(335px);
            height: p2r(335px);
        }
    }
}
.name {
    color: #000;
    font-size: 12px;
    line-height: 18px;
    margin: 10px;
}
.tag {
    height: 16px;
    line-height: 16px;
    padding: 0px 5px;
    font-size: 12px;
    background: $yellow-color;
    color: #fff;
    border-radius: 8px;
}
.info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: $yellow-color;
    margin: 0px 10px;
}
.icon {
    font-size: 20px;
}
</style>